import React, { useState, useMemo, useRef, useCallback } from 'react';
import { message } from 'antd';
import { DrawerForm, ModalForm } from '@ant-design/pro-components';
import CommonItemSelector from '@/components/CommonItemSelector'
const EditModal: React.FC<any> = ({
  isOpen,
  handleModal,
  categoryList,
  defArr = [],
}) => {

  const [data, setData] = useState(categoryList || [])

  const [selectList, setSelectList] = useState(defArr || [])

  console.log('defArr', defArr, categoryList);

  const filterData = (isDefault: boolean) => {
    console.log('categoryList', categoryList);
    return categoryList?.flatMap(({ etiologyCategory: { id, name }, etiologyList }: any) => {
      if (isDefault) {
        // 默认模式下返回完整的结构
        return { id, name, children: etiologyList };
      } else {
        // 非默认模式下只返回符合 defArr 的 name 字段数组
        return etiologyList
          .filter((etiology: any) => defArr.includes(etiology.id))
          .map(({ name }: { name: string }) => (name));
      }
    });
  };

  console.log('filterData', filterData(false));


  function onChangeSelectList(values: any) {
    console.log('values', values);

    setSelectList(values)
  }

  function preventDefault(e: any, id: string | number) {
    e && e?.preventDefault();
    const newSelectList = JSON.parse(JSON.stringify(selectList));
    const index = newSelectList?.findIndex((item: any) => item == id);
    if (index > -1) {
      newSelectList.splice(index, 1);
      setSelectList(newSelectList)
    }

  }

  const mapObj = useMemo(() => {
    let obj = {};
    data?.map((item: any) => {
      item?.etiologyList?.map((li: any) => {
        obj[li.id] = li;
      })
    })
    return obj;
  }, [data])

  function onKeep() {
    console.log('onKeep', data);
    handleModal(false, selectList)
  }

  // const defaultvalue = formRef.getFieldValue()
  // console.log('onVisibleChange', defaultvalue);

  const ref = useRef([])
  const onChange = useCallback((params) => {
    ref.current = params
  }, [])

  const handleSubmit = async () => {
    const selectList = ref?.current?.map((item) => item?.id)
    handleModal(false, selectList)
    console.log('handleSubmit', selectList);
  };


  return (
    // <Modal
    //   width={'80vw'}
    //   title=""
    //   open={isOpen}
    //   onCancel={() => handleModal(false)}
    //   bodyStyle={{ height: 500, overflowY: 'auto', paddingTop: '50px' }}
    //   footer={null}
    //   destroyOnClose={true}
    // >
    //   <div>
    //     <div style={{ position: 'absolute', top: '10px', left: '15px', backgroundColor: '#fff', zIndex: 1000 }}>
    //       <Space size={[8, 8]} wrap>
    //         {
    //           selectList?.map((item: any, index: number) => (
    //             <Tag
    //               closable
    //               className={styles.tag}
    //               key={index}
    //               closeIcon={<CloseOutlined />}
    //               onClose={(e) => preventDefault(e, item)}
    //             >
    //               <span>{mapObj && mapObj[item] && mapObj[item]?.name}</span>
    //             </Tag>
    //           ))
    //         }
    //       </Space>
    //     </div>
    //     <div>
    //       {
    //         Array.isArray(data) &&
    //         data.length > 0 &&
    //         <CheckCard.Group
    //           multiple
    //           // defaultValue={defArr.map((item: any) => item?.id)}
    //           value={selectList/* .map((item: any) => item?.id?.toString()) */}
    //           onChange={onChangeSelectList}
    //         >
    //           {
    //             data?.map((item: any, index: number) => (
    //               <div key={index}>
    //                 <h3>{item?.etiologyCategory?.name}</h3>
    //                 {
    //                   item?.etiologyList?.map((li: any, i: number) => {
    //                     // const isCheck = selectList.findIndex((arr: any) => arr == li?.id)
    //                     // console.log('isCheck :>> ', isCheck);
    //                     return (
    //                       <CheckCard
    //                         // checked={isCheck > -1}
    //                         className={styles.checkCard}
    //                         style={{ marginLeft: '5px !important' }}
    //                         key={i}
    //                         title={li?.name}
    //                         value={li?.id}
    //                       />
    //                     )
    //                   })
    //                 }
    //               </div>
    //             ))
    //           }
    //         </CheckCard.Group>
    //       }
    //     </div>

    //   </div>
    //   <Button type="primary" style={{ position: 'absolute', bottom: '15px', right: '30px' }} onClick={onKeep}>保存</Button>
    // </Modal >

    <ModalForm
      width={1200}
      style={{ margin: '10px', height: '400px' }}
      title='选择病因'
      visible={isOpen}
      onVisibleChange={(isShow) => handleModal(isShow)}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => console.log('Cancelled'),
      }}
      onFinish={handleSubmit}
    >
      <CommonItemSelector
        height={50}
        list={filterData(true)}
        multiple={true}
        detaultValues={filterData(false)}
        onChange={onChange}
      />
    </ ModalForm>
  );
};
export default EditModal;

